<template>
  <div class="jd_wrap">
    <div class="wrap">
      <c-title :title="title"></c-title>
      <div class="cate">
        <a 
        v-for="item in cate" :key="item.url"
        :href="`#/${item.categoryCode}`" class="ca_item">{{item.categoryName}} <van-icon name="arrow" /></a>
      </div>


      <ul class="com">
        <li v-for="item in list" :key="item.id"
       
        >
          <a >
            <lazy-component>
              <j-item
                :id="item.id"
                :img="item.img"
                :title="item.title"
                :countInfo="item.countInfo"
                :des="item.des"
                :categoryName="item.categoryName"
                :salePoint="item.salePoint"
              >
                <img src="item.img" alt="" v-lazy="item.img" @error="foo" />
              </j-item>
            </lazy-component>
          </a>
        </li>
      </ul>
      <div class="add_load">
        <p class="add_load">
          <a> 查看更多<van-icon name="arrow" /></a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { List } from "vant";
import JItem from "@/views/album/albumcomp/JItem.vue";

import { initJdAlbumListData } from "@/request/api.js";

export default {
  data() {
    return {
      page: 1,
      pageSize: 20,
      title: "经典必听",
      total:0,
      list: [],
      cate:[],
      loading: false,
      finished: false,
    };
  },
  props: {
    id: {
      type: Number,
    },
  },
  components: {
    JItem,
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      let list = [];
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        albumId: this.id,
      };
      initJdAlbumListData(data).then((res) => {
        console.log("经典",res.data)
        let { data } = res.data;
        this.total = res.data.totalCount
      
        console.log("012023",data);
        data.forEach((item) => {
          let obj = {
            id: item.albumInfo.id,
            img: "https://imagev2.xmcdn.com/" + item.albumInfo.cover,
            title: item.albumInfo.title,
            salePoint: item.albumInfo.salePoint,
            countInfo: item.statCountInfo,
            des: item.albumInfo.shortIntro,
            categoryName: item.pageUriInfo.categoryName,
            url:item.pageUriInfo.url,
            categoryCode:item.pageUriInfo.categoryCode,
            
          };

          

          list.push(obj);
        });
        for(let i =0 ; i < 4; i++){
          this.cate.push({categoryName:list[i].categoryName,url:list[i].url,categoryCode:list[i].categoryCode})
        }
        this.list = [...this.list, ...list];
      });
    },
    foo(e) {
      let img = e.srcElement;
      img.src = "../../../assets/icon/common/img_load.png";
      img.onerror = null;
    },

    
  },
};
</script>

<style lang="scss" scoped>
.jd_wrap {
  margin-top: 45px;
  padding-left: 15px;
  .wrap {

    .cate{
      a{
        display: inline-block;
        padding: 3px 4px;
        font-size: 14px;
        border-radius: 10px;
        background-color: #f3f4f5;
        color:#111;
        margin-right: 10px;
        margin-bottom: 15px;
      }
    }
    .com {
      li {
        border-bottom: 1px solid #f3f4f5;
        a {
          display: block;
        }
      }
    }

    .add_load {
    p {
      text-align: center;
      a {
        line-height: 1.4;
        font-size: 15px;
        color: #f86442;
        font-weight: 700;
        i {
          margin-left: 3px;
        }
      }

      padding: 25px 0;
    }
  }
  }
}

/deep/.c_title{
  h2{
    font-size: 16px;
  }
}
</style>

